<template>
   <div class="Back">
      <div class="Setting"   ref="Setting">
            <SetTitle class="SetTitle flex"/>
            <SetNavi class="SetNavi"/>
            <div class="SetContent"   ref="SetContent">
                  <SetBackImage  class="retract" v-if="SettingIndex==1"/>
                  <SetBackColor  class="retract"  v-else-if="SettingIndex==2"/>  
                   <SetSubject  class="retract"  v-else-if="SettingIndex==3"/>
            </div>
            
            <SetColor class="SetColor" v-if="ColorState"/>
            <!-- <i class="el-icon-close exit" @click="SETTINGDOWN()"></i> -->
      </div>

   </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
import SetBackColor from './SetBackColor/SetBackColor.vue'
import SetBackImage from './SetBackImage/SetBackImage.vue'
import SetColor from './SetColor/SetColor.vue'
import SetNavi from './SetNavi/SetNavi.vue'
import SetSubject from './SetSubject/SetSubject.vue'
import SetTitle from './SetTitle/SetTitle.vue'
  export default 
  {
  components: { SetNavi, SetBackImage ,SetTitle, SetBackColor,SetColor, SetSubject },
     name :'', 

     computed:{
        ...mapState('Setting',['SettingIndex','SettingBoxSize','ColorState']),
     },
      methods:{
        ...mapMutations('Setting',['SETTINGDOWN']),
        changeBoxSize(newSize){
           if(newSize==0){
                this.$refs.Setting.className='Setting FullContent'   
           }
           else if(newSize==1){            
               this.$refs.Setting.className='Setting SettingFull'
               
           }
        }
     },
     mounted(){
       document.body.style.overflow='hidden'
     },
     beforeDestroy(){
       document.body.style.overflow='auto'
     },

     watch:{
       SettingBoxSize(newSize){
          this.changeBoxSize(newSize)
       }
     }
  }
</script>
<style scoped lang='less'>

 /* 平板或手机 */
 @media screen and (max-width: 1000px){
   div.SetNavi{
       width: 50px !important;
       min-width: 50px !important;
       padding: 10px 5px;
   }
   .SetContent{
        width: calc( 100% - 50px) !important;
        max-width: calc( 100% - 50px) !important;
   }
 }

.Setting{
    min-width: 350px;
    max-width: 100vw;

    width: 50vw;
    height: 70vh;
    
    min-height: 300px;
    max-height: 100vh;

    border-radius: 10px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    transition-duration: 0.4s;
}

.SetColor{ 
   width: 100%;
   height: 100%;
   background: var(--GeneralBackColor-half);
   position: absolute;
   z-index: 9999;
}
.SettingFull{
    width: 100vw;
    height: 100vh;
    border-radius:0px;
}

.SetNavi{
    width: 20%;
    max-width: 200px;
    min-width: 150px;
    height: 100%;
    background: #efefef;
    padding: 10px;
    box-sizing: border-box;
    position:relative;
}
.SetTitle{
   width: 100%;
   height: 50px;
   background: var( --GeneralBackColor);
}
.SetContent{
   min-width: calc( 100% - 200px);
   width: 80%;
   max-width: calc( 100% - 150px);
   height: calc( 100% - 50px);
   overflow: auto;
   background: var(--GeneralBackColor-half);
}


</style>